<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>体检报告</p>
      <div></div>
    </header>

    <nav>
      <div :class="{ active: flag == 'value1' }" @click="show('value1')">
        总检结论
      </div>
      <div :class="{ active: flag == 'value2' }" @click="show('value2')">
        报告详情
      </div>
    </nav>

    <div class="top-ban"></div>

    <div class="nav-content-item" v-if="flag == 'value1'">
      <div class="item">
        <div class="title">异常项</div>
        <ul>
          <li v-for="erci in errorReportArr" :key="erci.cidrId">
            <div class="indications">
              <div class="left">
                <div>异</div>
                <p>{{ erci.name }}</p>
              </div>
              <div class="right">
                <p>{{erci.value}}{{ erci.unit }}</p>
                <p>正常值范围：{{ erci.normalValueString }}</p>
              </div>
            </div>
          </li>
          
        </ul>
      </div>
      <div class="item">
        <div class="title">一、尊敬的顾客，您本次体检结论如下：</div>
        <ul>
          <li class="conclusion-title" v-for="(or,index) in overallResultArr" :key="or.orId">
            {{ index+1+"、"+or.title }}
          </li>
          
        </ul>
      </div>
      <div class="item">
        <div class="title">二、尊敬的顾客，您本次体检建议信息日下：</div>
        <ul>
          <li class="conclusion-content" v-for="(ovre,index) in overallResultArr" :key="ovre.orId">
            <h3>{{ index+1+"、"+ovre.title }}</h3>
            <p>
              {{ ovre.content }}
            </p>
          </li>
          
        </ul>
      </div>
    </div>

    <div class="nav-content-item" v-if="flag == 'value2'">
      <div class="item" v-for="ci in reportArr" :key="ci.cirId">
        <div class="title">{{ ci.ciName }}</div>
        <ul>
          <li v-for="cidetail in ci.cidetailedreportList" :key="cidetail.cidrId">
            <div class="indications" v-if="cidetail.type!=4">
              <div class="left">
                <div v-if="cidetail.isError==1">异</div>
                <p>{{cidetail.name}}</p>
              </div>
              <div class="right">
                <p>{{cidetail.value}}</p>
                <p>正常值范围：{{ cidetail.normalValueString }}</p>
              </div>
            </div>
            <div class="indications-type-4" v-if="cidetail.type==4">
              <div>
                <p>{{ cidetail.name }}</p>
              </div>
              <div>
                <p>
                    {{ cidetail.content }}
                </p>
              </div>
            </div>
          </li>
          
         
        </ul>
      </div>
      
      
    </div>

    <div class="bottom-ban"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import { reactive, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSessionStorage } from "@/common";
import axios from "axios";
export default {
  setup() {
    const route = useRoute();

    const state = reactive({
      flag: "value1",
      overallResultArr: [], //总检结论数组
      reportArr: [], //体检结果数组，含大项和明细项
      orderId: route.query.orderId, //显示哪张订单的体检报告
      users: getSessionStorage("userlingnan"),
      errorReportArr: [], //异常项数组
    });

    loadData();

    function loadData() {
      //初始化数据，问后端接口要
      axios
        .post("/api/listOverallResult", {userId:state.users.userId,orderId:state.orderId})
        .then((response) => {

            state.overallResultArr=response.data.data;

        })
        .catch((error) => {
          console.error(error);
        });

        axios
        .post("/api/listReport", {userId:state.users.userId,orderId:state.orderId})
        .then((response) => {
            state.reportArr=response.data.data;

            //给异常项数组填充数据
            for(let i=0;i<state.reportArr.length;i++){
                let cidetailList=state.reportArr[i].cidetailedreportList;
                for(let j=0;j<cidetailList.length;j++){
                    if(cidetailList[j].isError==1){
                        state.errorReportArr.push(cidetailList[j]);
                    }
                }
            }

        })
        .catch((error) => {
          console.error(error);
        });
    }

    function show(val) {
      state.flag = val;
    }

    return {
      ...toRefs(state),
      show,
      loadData,
    };
  },
  components: {
    Footer,
  },
};
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
}

/*********************** header ***********************/
header {
  width: 100%;
  height: 15.7vw;
  background-color: #fff;

  position: fixed;
  left: 0;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0 3.6vw;
}
header .fa {
  font-size: 8vw;
}

/*********************** common样式 ***********************/
.top-ban {
  width: 100%;
  height: 31.7vw;
}
.bottom-ban {
  width: 100%;
  height: 14.2vw;
}

/*********************** nav ***********************/
nav {
  width: 100%;
  height: 16vw;
  display: flex;
  background-color: #f9f9f9;

  position: fixed;
  left: 0;
  top: 15.7vw;
}
nav div {
  flex: 1;
  height: 14vw;
  box-sizing: border-box;

  text-align: center;
  line-height: 14vw;
  font-size: 4.2vw;
  font-weight: 600;
  color: #555;
}

.active {
  border-bottom: solid 2px #137e92;
  color: #137e92;
}

/*********************** nav-content-item ***********************/
.nav-content-item .item {
  width: 92vw;
  margin: 0 auto;
  margin-top: 3vw;
  margin-bottom: 3vw;
  overflow: hidden;
  border-radius: 3vw;
  background-color: #fff;
}
.nav-content-item .item .title {
  width: 100%;
  height: 10vw;
  background-color: #7bafd7;
  line-height: 10vw;
  box-sizing: border-box;
  padding-left: 4vw;
  font-size: 4.2vw;
  color: #fff;
}

.nav-content-item .item ul {
  width: 100%;
}

/****** 数值型检查项样式 ******/
.nav-content-item .item ul li {
  border-bottom: solid 1px #eee;
}
.nav-content-item .item ul li:last-child {
  border-bottom: none;
}
.nav-content-item .item ul li .indications {
  width: 100%;
  height: 14vw;
  padding: 0 3vw;
  display: flex;
  align-items: center;
  font-size: 3.2vw;
  color: #333;
}

.nav-content-item .item ul li .indications .left {
  flex: 1;
  display: flex;
}
.nav-content-item .item ul li .indications .left div {
  background-color: #ba634e;
  color: #fff;
  padding: 0.2vw 0.6vw;
  border-radius: 0.6vw;
}
.nav-content-item .item ul li .indications .left p {
  font-weight: 600;
  margin-left: 2vw;
}
.nav-content-item .item ul li .indications .right {
  flex: 1;
}
.nav-content-item .item ul li .indications .right p:last-child {
  color: #999;
}
/****** 数值型检查项样式 ******/

/****** 描述型检查项样式 ******/
.nav-content-item .item ul li .indications-type-4 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 3vw;

  font-size: 3.2vw;
  color: #333;
}
.nav-content-item .item ul li .indications-type-4 div {
  margin: 5vw 0;
}
.nav-content-item .item ul li .indications-type-4 div:first-child {
  font-weight: 600;
}
.nav-content-item .item ul li .indications-type-4 div:last-child {
  color: #999;
}
/****** 描述型检查项样式 ******/

.nav-content-item .item ul .conclusion-title {
  width: 100%;
  height: 12vw;
  box-sizing: border-box;
  border-bottom: solid 1px #eee;
  padding: 0 3vw;

  display: flex;
  align-items: center;
  font-size: 4vw;
  color: #555;
}
.nav-content-item .item ul .conclusion-title:last-child {
  border-bottom: none;
}

.nav-content-item .item ul .conclusion-content {
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 1px #eee;
  padding: 4vw 3vw;
  font-size: 3.6vw;
  color: #555;
}
.nav-content-item .item ul .conclusion-content:last-child {
  border-bottom: none;
}
.nav-content-item .item ul .conclusion-content h3 {
  font-size: 4vw;
  font-weight: 600;
  margin-bottom: 2vw;
}
.nav-content-item .item ul .conclusion-content p {
  text-indent: 8vw;
}
</style>